<template>
  <div class="padding-bottom-30">
    <div class="font-weight-700 font-size-18 padding-bottom-15">计划</div>
    <div class="padding-left-40">
      <div class="font-weight-700 font-size-16 padding-top-5">年度计划</div>
      <div class="flex margin-bottom-20 margin-top-20 padding-left-20">
        <div class="font-weight-700 font-size-16 margin-right-15">
          <el-select class="header-project" v-model="planYearProjectKey" placeholder="请选择项目" size="mini">
            <el-option v-for="(item, index) in projectList" :key="index" :label="item.name" :value="item.primaryKey"> </el-option>
          </el-select>
        </div>

        <div class="font-weight-700 font-size-16">
          <el-date-picker v-model="planYear" type="year" size="mini" placeholder="选择年"> </el-date-picker>
        </div>

        <el-button class="margin-left-15" type="primary" size="mini" @click="downPlanTemplate('yearPlan')">下载模板</el-button>
        <el-upload :show-file-list="false" action accept="" :http-request="event => importPlanData(event.file)">
          <el-button type="primary" class="margin-left-15" size="mini">导入数据</el-button>
        </el-upload>
      </div>
    </div>

    <div class="padding-left-40">
      <div class="font-weight-700 font-size-16 padding-top-5">执行计划</div>
      <div class="flex margin-bottom-20 margin-top-20 padding-left-20">
        <div class="font-weight-700 font-size-16 margin-right-15">
          <el-select class="header-project" v-model="planYearMonthProjectKey" placeholder="请选择项目" size="mini">
            <el-option v-for="(item, index) in projectList" :key="index" :label="item.name" :value="item.primaryKey"> </el-option>
          </el-select>
        </div>

        <div class="font-weight-700 font-size-16">
          <el-date-picker v-model="planYearMonth" type="month" size="mini" placeholder="选择年月"> </el-date-picker>
        </div>

        <el-button class="margin-left-15" type="primary" size="mini" @click="downPlanTemplate('monthPlan')">下载模板</el-button>
        <el-upload :show-file-list="false" action accept="" :http-request="event => importPlanData(event.file)">
          <el-button type="primary" class="margin-left-15" size="mini">导入数据</el-button>
        </el-upload>
      </div>
    </div>

    <div class="padding-left-40">
      <div class="font-weight-700 font-size-16 padding-top-5">现金流</div>
      <div class="flex margin-bottom-20 margin-top-20 padding-left-20">
        <div class="font-weight-700 font-size-16 margin-right-15">
          <el-select class="header-project" v-model="cashProjectKey" placeholder="请选择项目" size="mini">
            <el-option v-for="(item, index) in projectList" :key="index" :label="item.name" :value="item.primaryKey"> </el-option>
          </el-select>
        </div>

        <div class="font-weight-700 font-size-16">
          <el-date-picker v-model="cashYearMonth" type="month" size="mini" placeholder="选择年月"> </el-date-picker>
        </div>

        <el-button type="primary" class="margin-left-15" size="mini" @click="pushtask">推送任务</el-button>
      </div>
    </div>

    <div class="font-weight-700 font-size-18 padding-bottom-15">合同</div>
    <div class="padding-left-40" v-for="levelOne in list" :key="levelOne.type">
      <div class="font-weight-700 font-size-16 padding-top-5">{{ levelOne.name }}</div>
      <div v-for="(item, index) in levelOne.list" :key="index" class="flex margin-bottom-20 margin-top-20 padding-left-20">
        <div class="font-weight-700 font-size-16 padding-top-5 margin-left-25 contract-type">{{ item.name }}</div>
        <el-button class="margin-left-45" type="primary" size="mini" @click="downTemplate(item.path)">下载模板</el-button>
        <el-upload :show-file-list="false" action accept="" :http-request="event => importData(event.file, item.type)">
          <el-button type="primary" class="margin-left-15" size="mini">导入数据</el-button>
        </el-upload>
      </div>
    </div>

    <div class="font-weight-700 font-size-16 padding-top-5 padding-left-40">合同附件</div>
    <div class="flex margin-bottom-20 margin-top-20 padding-left-60">
      <div class="font-weight-700 font-size-16 padding-top-5 margin-left-25 contract-type">批量导入</div>
      <el-button type="primary" class="margin-left-45" size="mini" @click="batchUpload">上传附件</el-button>
      <el-button class="margin-left-15" type="primary" size="mini" @click="downContractFile">下载附件列表</el-button>
      <el-upload :show-file-list="false" action accept="" :http-request="event => importData(event.file, 'contractFile')">
        <el-button type="primary" class="margin-left-15" size="mini">上传附件列表</el-button>
      </el-upload>
    </div>
    <div class="flex margin-bottom-20 margin-top-20 padding-left-60">
      <div class="font-weight-700 font-size-16 padding-top-5 contract-type margin-left-25">单个附件导入</div>
      <el-button type="primary" class="margin-left-45" size="mini" @click="contractFileShow">导入</el-button>
    </div>
    <div v-if="importFlagYes || importFlagNo" class="flex align-centers justify-center padding-30 result-box">
      <el-result v-if="importFlagYes" icon="success" title="导入成功" subTitle="">
        <template slot="extra">
          <el-button type="primary" size="medium" plain @click="importFlagYes = false">返回</el-button>
        </template>
      </el-result>
      <el-result v-if="importFlagNo" icon="error" title="导入失败" subTitle="">
        <template slot="extra">
          <el-button type="primary" size="medium" plain @click="importFlagNo = false">返回</el-button>
        </template>
      </el-result>
    </div>

    <div class="font-weight-700 font-size-18 padding-bottom-15">项目财务</div>
    <div class="padding-left-40" v-for="levelOne in checkComputList" :key="levelOne.type">
      <div class="font-weight-700 font-size-16 padding-top-5">{{ levelOne.name }}</div>

      <div v-for="(item, index) in levelOne.list" :key="index" class="flex margin-bottom-20 margin-top-20 padding-left-20">
        <div class="font-weight-700 font-size-16 padding-top-5 contract-type margin-left-25">{{ item.name }}</div>
        <el-button class="margin-left-45" type="primary" size="mini" @click="downTemplate(item.path)">下载模板</el-button>
        <el-upload :show-file-list="false" action accept="" :http-request="event => importData(event.file, item.type)">
          <el-button type="primary" class="margin-left-15" size="mini">导入数据</el-button>
        </el-upload>
      </div>
    </div>

    <div class="mask" v-if="importFlagYes || importFlagNo"></div>

    <el-dialog title="上传" :visible.sync="batchDialog" width="65%" :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false">
      <upload-file :multiple="true" class="upload-box" :limit="10" tip="" :max-size="100" accept=".xlsx,.xls,.csv,.png,.jpg,.Png,.Jpg,.pdf" :fileList.sync="fileList"> </upload-file>

      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="batchDialog = false">取 消</el-button>
        <el-button size="small" type="primary" @click="saveBatch">确 定</el-button>
      </span>
    </el-dialog>

    <import-contract-file ref="contractFile" :bizTypeList="bizTypeList"></import-contract-file>
  </div>
</template>
<script>
  import * as Api from '../../../api/index';
  import importContractFile from './importContractFile.vue';
  import { requestTips } from '@/common/js/utils.js';
  import { allProjectList } from '@/api';

  export default {
    data() {
      return {
        importFlagYes: false,
        importFlagNo: false,
        batchDialog: false,
        loading: null,
        list: [
          {
            type: 'income',
            name: '收入类合同',
            list: [
              { type: 'lease', name: '租赁类合同', path: '/static/租赁类合同模板.xlsx' },
              { type: 'advert', name: '广告位租赁合同', path: '/static/广告位租赁合同导入模板.xlsx' },
              { type: 'place', name: '临时场地租赁合同', path: '/static/临时场地租赁合同导入模板.xlsx' },
              { type: 'parking', name: '停车场代运营合同', path: '/static/停车场代运营合同导入模板.xlsx' },
            ],
          },
          {
            type: 'pay',
            name: '支出类合同',
            list: [{ type: 'pay', name: '支出类合同', path: '/static/支出类合同导入模板.xlsx' }],
          },
          {
            type: 'bill',
            name: '账单',
            list: [{ type: 'bill', name: '账单', path: '/static/billTemplate.xlsx' }],
          },
          {
            type: 'payment',
            name: '付款导入',
            list: [{ type: 'payment', name: '付款导入', path: '/static/paymentTemplate.xlsx' }],
          },
        ],
        checkComputList: [
          {
            type: 'incomeCheck',
            name: '收入核算',
            list: [{ type: 'incomeCheck', name: '收入核算', path: '/static/收入核算模板.xlsx' }],
          },
          {
            type: 'payCheck',
            name: '支出核算',
            list: [{ type: 'payCheck', name: '支出核算', path: '/static/支出核算模板.xlsx' }],
          },
          {
            type: 'payRecord',
            name: '支出记录',
            list: [{ type: 'payRecord', name: '支出记录', path: '/static/支出记录模板.xlsx' }],
          },
        ],
        fileList: [],
        bizTypeList: [],
        projectList: [],
        planYear: '',
        planYearProjectKey: '',
        planYearMonth: '',
        planYearMonthProjectKey: '',
        cashProjectKey: '',
        cashYearMonth: '',
      };
    },

    mounted() {
      this.getDictionary();
      this.getProjectList();
    },

    methods: {
      //常量
      async getDictionary() {
        let res = await Api.apiDictionary();
        this.bizTypeList = res.attachmentType || [];
      },

      // 查询项目
      async getProjectList() {
        const res = await allProjectList({
          projectStatus: 2,
        });
        this.projectList = res.rows || [];
      },

      //下载模板
      downTemplate(path) {
        let a = document.createElement('a');
        a.style.display = 'none';
        a.href = path;
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
      },

      //下载绑定关系的合同附件excle
      async downContractFile() {
        Api.apiContractFileDownload({}).then(res => {
          if (res.success) {
            this.showTips(res.message);
          }
        });
      },

      async downPlanTemplate(type) {
        let formData = {};

        if (type == 'yearPlan') {
          if (!this.planYearProjectKey) {
            this.$message.warning('请选择项目');
            return;
          }

          if (!this.planYear) {
            this.$message.warning('请选择年份');
            return;
          }

          formData.projectKey = this.planYearProjectKey;
          formData.planYear = this.planYear.getFullYear();
        } else {
          if (!this.planYearMonthProjectKey) {
            this.$message.warning('请选择项目');
            return;
          }

          if (!this.planYearMonth) {
            this.$message.warning('请选择月份');
            return;
          }

          formData.projectKey = this.planYearMonthProjectKey;
          formData.planYear = this.planYearMonth.getFullYear();
          formData.planMonth = this.planYearMonth.getMonth() + 1;
        }

        this.showLoading();
        formData.optSource = "data-config";
        await Api.apiExportPlan(formData).then(res => {
          this.loading.close();
        });
      },

      //导入计划
      async importPlanData(file) {
        this.showLoading();
        Api.apiImportPlan(file).then(res => {
          this.loading.close();
          if (!res.success) {
            this.$message.warning(res.message);
          } else {
            this.$message.success('导入成功');
          }
        });
      },

      //推送任务
      async pushtask() {
        if (!this.cashProjectKey) {
          this.$message.warning('请选择项目！');
          return;
        }
        if (!this.cashYearMonth) {
          this.$message.warning('请选择年月！');
          return;
        }
        let res = await Api.apiCashPush({
          projectKeys: [this.cashProjectKey],
          date: this.cashYearMonth,
        });
        requestTips(res, () => {
          this.cashProjectKey = '';
          this.cashYearMonth = '';
        });
      },

      //导入数据
      async importData(file, type) {
        this.showLoading();
        let methodName;
        if (type == 'lease') {
          methodName = 'apiContractLeaseImport';
        } else if (type == 'advert') {
          methodName = 'apiContractAdImport';
        } else if (type == 'place') {
          methodName = 'apiContractPlaceImport';
        } else if (type == 'parking') {
          methodName = 'apiContractParkImport';
        } else if (type == 'pay') {
          methodName = 'apiContractPayImport';
        } else if (type == 'payment') {
          methodName = 'apiContractPaymentImport';
        } else if (type == 'contractFile') {
          methodName = 'apiContractFileImport';
        } else if (type == 'bill') {
          methodName = 'apiContractBillImport';
        } else if (type == 'incomeCheck') {
          methodName = 'apiIncomeImport';
        } else if (type == 'payCheck') {
          methodName = 'apiPaymentImport';
        } else if (type == 'payRecord') {
          methodName = 'apiPayRecordImport';
        }

        await Api[methodName](file)
          .then(res => {
            console.log(res);
            if (res.success) {
              this.showTips(res.message);
            }
            this.loading.close();
          })
          .catch(error => {
            this.loading.close();
          });
      },

      contractFileShow() {
        this.$refs.contractFile.init();
      },

      //批量导入 上传附件
      batchUpload() {
        this.fileList = [];
        this.batchDialog = true;
      },

      //批量导入 上传附件
      async saveBatch() {
        let fileList = this.getFileList();
        let res = await Api.apiContractFileKeys({ attachmentList: fileList });
        requestTips(res, () => {
          this.batchDialog = false;
        });
      },

      // 设置附件列表
      getFileList() {
        let list = [];
        this.fileList.forEach(item => {
          if (item.response && item.response.data.rows.length > 0) {
            let fileObj = item.response.data.rows[0];
            list.push({
              fileId: fileObj.key,
              fileUrl: fileObj.url,
              fileTitle: item.name,
            });
          }
        });
        return list;
      },

      showTips(message) {
        if (message == '导入成功') {
          this.$message.success(message);
          // this.importFlagYes = true;
        } else {
          this.$message.warning(message);
          // this.importFlagNo = true;
        }
      },

      showLoading() {
        this.loading = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)',
        });
      },
    },

    components: { importContractFile },
  };
</script>
<style lang="scss" scoped>
  .result-box {
    background: #fff;
    width: 600px;
    border: 1px solid #f1f1f1;
    position: absolute;
    top: 25%;
    left: 50%;
    margin-left: -300px;
    z-index: 9;
  }
  .mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0.5;
  }
  .contract-type {
    width: 130px;
  }
</style>
